<template>
  <div class="perm-list-item">
    <div :class="'perm-list-item-title '+ 'perm-list-item-title-'+level">
      <component v-if="item.meta?.icon" :is="item.meta.icon"/>
      {{ item.meta?.title }}
      <a-tag v-if="item.meta?.permission" color="blue" class="margin-none">
        {{ item.meta?.permission }}
      </a-tag>
    </div>
    
    <div 
      v-if="hasChildren || hasActions" 
      :class="'perm-list-item-content '+'perm-list-item-content-'+level"
    >
      <!-- 渲染子权限 -->
      <template v-if="hasChildren">
        <permission-item
          v-for="child in item.children"
          :key="child.path"
          :item="child"
          :level="level + 1"
        />
      </template>
      
      <!-- 渲染操作权限 -->
      <div class="padding-sm" v-else-if="hasActions">
        <a-tag v-for="action in item.meta?.actions" :key="action" color="green">
          {{ action }}
        </a-tag>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'

interface RouteItem {
  path: string
  meta?: {
    title?: string
    icon?: string
    permission?: string
    actions?: string[]
  }
  children?: RouteItem[]
}

const props = defineProps<{
  item: RouteItem
  level: number
}>()


// 检查是否有子权限
const hasChildren = computed(() => {
  return props.item.children && props.item.children.length > 0
})

// 检查是否有操作权限
const hasActions = computed(() => {
  return props.item.meta?.actions && props.item.meta.actions.length > 0
})
</script>

<style scoped>
.perm-list-item + .perm-list-item {
  border-top: 1px solid #f0f0f0;
}

.perm-list-item {
  display: flex;
  gap: 20px;
}

.perm-list-item-title {
  padding: 8px 12px;
  align-items: center;
  display: flex;
  gap: 8px;
}
.perm-list-item-title-1{flex: 0 0 180px;}
.perm-list-item-title-2{flex: 0 0 210px;}
.perm-list-item-title-3{flex: 0 0 220px;}
.perm-list-item-content {
  flex: 1;
  border-left: 1px solid #f0f0f0;
}
</style>